<template>
  <div class="box">
    <!-- 头部 -->
    <div class="headBox">
      <van-icon name="arrow-left" class="icon_bo" @click="fanhui" />
      <h5 class="chattext">历史问诊</h5>
    </div>
    <!-- 主体部分 -->
    <div class="main">
      <div>
        <div v-for="(item, index) in listdata.historyResult" :key="index">
          <div class="imgbox">
            <!-- <img :src="item.imagePic" alt="Doctor Image" class="imgaabox" /> -->
             <Image :src="item.imagePic" alt="Doctor Image" class="imgaabox" ></Image>
            <div class="contion_box">
              <div>
                <h3 class="contion_listname">{{ item.doctorName }}</h3>
                <span> {{ item.jobTitle }}/{{ item.department }} </span>
              </div>
              <p class="contion_listname">问诊时间:{{ item.inquiryTime }}</p>
              <div>
                <van-button type="primary" class="buttonaaok" @click="chaChat()"
                  >查看问诊记录</van-button
                >
                <van-button
                  v-if="item.evaluateStatus === 2"
                  type="primary"
                  class="buttonaaoka"
                  @click="pingjia(item)"
                  >查看评价</van-button
                >

                <!-- 如果 item.evaluateStatus 不等于 2，显示 "去评价" 按钮 -->
                <van-button v-else type="primary" class="buttonaaoka" @click="pingjia(item)"
                  >去评价</van-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import router from '@/router'
import { usecurrentStore } from '../../stores/Consultation'
import { onMounted } from 'vue'
import Image from '@/components/image/index.vue'
//获取仓库的内容
const listdata: any = usecurrentStore()

const fanhui = () => {
  router.push('/my')
}
onMounted(async () => {
  const userId = parseInt(JSON.parse(localStorage.getItem('userId') || '0'), 10)
  const sessionId = JSON.parse(localStorage.getItem('sessionId') || '""')
  const page = 1
  const count = 5

  // 调用actions中的方法获取数据
  await listdata.historyData(userId, sessionId, page, count)
  console.log(listdata.historyResult, '问诊')
})
//评价
const pingjia = (item: any) => {
  if (item.evaluateStatus === 2) {
    // 如果已经评价，则跳转到评价详情页面
    router.push({ path: '/evaluate_detail', query: { recordId: item.recordId } })
  } else {
    // 否则，跳转到评价页面
    router.push({
      path: '/evaluate_box',
      query: { recordId: item.recordId, doctorId: item.doctorId }
    })
  }
}

//查看历史问诊例句
const chaChat = () => {
  router.push('/chat')
}
</script>
<style scoped lang="scss">
.box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
// 头部
.headBox {
  width: 100%;
  height: 40px;
  background-color: white;
  border-bottom: 1px solid #ccc;
  .icon_bo {
    float: left;
    line-height: 40px;
    font-size: 20px;
  }
  .chattext {
    text-align: center;
    line-height: 40px;
    font-size: 15px;
  }
}

// 主体
.main {
  flex: 1;
}
.imgaabox {
  width: 30vw;
  //   height: 1rem;
  margin-left: 0.3rem;
  margin-top: 0.3rem;
  float: left;
  //   background-color: red;
}
.contion_box {
  width: 50%;
  float: left;
  height: 4rem;
  font-size: 15px;
  //   border: 1px solid gray;
  margin-left: 0.5rem;
  margin-top: 0.1rem;
  .contion_listname {
    // text-align: center;
    margin-top: 0.4rem;
  }
}
.buttonaaok {
  float: left;
  //   background-color: red;
  //   margin-left: 1.8rem;
  margin-top: 10px;
}
.buttonaaoka {
  float: right;
  margin-right: -1rem;
  margin-top: 10px;
}
</style>
